
<template>
	<div class="risk-content">
		<eagle-page-list
			:controller="controller"
			:queryParams="queryParams"
			@bindData="bindData"
			:conditions="conditions"
			ref="eaglePageList"
		>
			<template #list>
				<div class="plan-list">
					<div
						class="plan-detail mb-10"
						v-for="(item, index) in list"
						:key="index"
						@click.stop="_goDetail(item)"
					>
						<div class="plan-detail-hd mb-10">
							<img
								src="@/assets/Images/AppIcon/icon_studyplan_icon.png"
								alt=""
							/>
							<div class="mt-5">
								<div class="plan-detail-title mb-10">{{ item.PlanName }}</div>
								<div class="plan-detail-describe">
									{{ item.Introduce || '暂无描述' }}
								</div>
							</div>
						</div>
						<div>
							培训时间：{{ item.PlanStartTime }}至{{ item.PlanFinishTime }}
						</div>
						<eagle-divider />
						<div class="plan-detail-opear">
							<div class="plan-detail-follow">
								<eagle-button
									v-if="item.Status == 0"
									@click.stop="del(item)"
									class="ml-10"
									type="default"
									size="small"
									>删除</eagle-button
								>
								<eagle-button
									v-if="item.Status == 0"
									@click.stop="Publish(item)"
									class="ml-10"
									type="default"
									size="small"
									>发布</eagle-button
								>
								<eagle-button
									v-if="item.Status !== 0 && item.Status !== 5"
									type="default"
									size="small"
									@click.stop="goFollow(item)"
									>跟踪</eagle-button
								><eagle-button
									type="default"
									size="small"
									@click.stop="goAppro(item)"
									class="ml-10"
									>审批历史</eagle-button
								>
							</div>
						</div>
						<eagle-tag type="danger" v-if="item.Status == 0" class="tags"
							>未发布</eagle-tag
						>
						<eagle-tag type="primary" v-if="item.Status == 10" class="tags"
							>进行中</eagle-tag
						>
						<eagle-tag type="success" v-if="item.Status == 20" class="tags"
							>已结束</eagle-tag
						>
						<eagle-tag type="warning" v-if="item.Status == 5" class="tags"
							>审批中</eagle-tag
						>
					</div>
				</div>
			</template>
		</eagle-page-list>
	</div>
</template>

<script>
import { Dialog } from 'vant'
export default {
	data() {
		return {
			list: [],
			conditions: {},
			controller: "/TrainPlan",
			queryParams: {
				dataType: "MyStudy",
			},
			CurrentProgress: 60,
		}
	},
	beforeRouteLeave(to, from, next) {
		if(to.name=='AddTrainingPlan'){
			to.meta.title = '编辑培训计划'
		}
		next() //继续下一步
	},
	created() {

	},

	methods: {
		bindData(data) {
			this.list = [];
			if (data) {
				this.list = data;
			}
		},
		// 发布
		Publish(item) {
			const data = {
				id: item.ID,
			}
			let _this = this;
			_this.$axios
			.get("/TrainPlan/Publish",{params:data})
			.then((res) => {
				_this.$refs.eaglePageList.confirm()
			})
		},
		// 删除
		del(item) {
			let _this = this
			const data = {
				id: item.ID,
			}
			Dialog.confirm({
				title: '提示',
				message: '确定删除吗？',
			})
				.then(() => {
					_this.$axios
					.get("/TrainPlan/Delete",{params:data})
					.then((res) => {
						_this.$refs.eaglePageList.confirm()
					})
				})
				.catch(() => {
					// on cancel
				})
		},

		// 详情
		_goDetail(item) {
			// 编辑培训计划
			if (item.Status == 0) {
				// this.$router.push('/Train/AddTrainingPlan?id=' + item.ID)
				this.$router.push({
					path:'/Train/AddTrainingPlan',
					query:{
						id:item.ID,
						key:'edit'
					}
				})
			} else {
				this.$router.push('/Train/TrainingPlanListDetail?id=' + item.ID)
			}
		},

		goFollow(item) {
			this.$router.push(
				'/Train/TrainingPlanListFollow?planCode=' + item.PlanCode
			)
		},

		goAppro(item) {
			this.$router.push('/Train/TrainingPlanApprove?recordID=' + item.ID)
		},
	},
}
</script>

<style lang="less" scoped>
.risk-content {
	background-color: #e8f1f8;
	min-height: 100vh;
	.info_search {
		padding: 10px;
		border-radius: 5px !important;
		.van-field__control {
			background-color: #ffffff !important;
		}
	}
}

.plan-detail {
	width: 100%;
	background-color: #fff;
	border-radius: 8px;
	padding: 10px;
	color: #333;
	font-size: 12px;
	position: relative;
}

.plan-detail-hd {
	display: flex;
	img {
		width: 50px;
		height: 50px;
		margin-right: 10px;
	}
	.plan-detail-title {
		font-size: 14px;
		color: #000;
	}
	span {
		color: #666;
	}
}
.plan-detail-describe {
	line-height: 1.2;
	// word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
	-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
	-webkit-line-clamp: 2; /** 显示的行数 **/
	overflow: hidden; /** 隐藏超出的内容 **/
	word-break: break-all;
}
.plan-detail-bd {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.plan-detail-opear {
	display: flex;
	align-items: center;
}
.plan-detail-follow {
	flex: 1;
	text-align: right;
}

.tags {
	border-radius: 3px;
	position: absolute;
	top: 0px;
	right: 0;
	border-radius: 0 5px 0 5px
}
</style>